<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title,style)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/animate.css}"/>
    <link rel="stylesheet" th:href="@{/css/global.css}"/>
    <link th:href="@{//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet"/>
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}"></script>
    <script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <title th:replace="${title}">GZC的个人博客</title>
    <style th:replace="${style}"></style>
</head>
<body>

<div class="blog-header" th:fragment="blog-header(pageName)">
    <div class="layui-container">
        <div class="blog-logo">GZC</div>
        <!-- 移动端显示 -->
        <a id="mobile_show_nav" href="#" class="layui-hide-md"><i class="layui-icon layui-icon-spread-left"></i></a>
        <!-- PC端水平显示，移动端侧边垂直显示 -->
        <ul class="layui-nav layui-show-md-inline" id="nav_left" style="float: left;display: none;">
            <li class="layui-nav-item" th:classappend="${pageName=='index'}?'layui-this':''">
                <a th:href="@{/}"><i class="fa fa-home"></i>&nbsp;首页</a>
            </li>
            <li class="layui-nav-item" th:classappend="${pageName=='article'}?'layui-this':''">
                <a th:href="@{/article}"><i class="fa fa-file-text-o"></i>&nbsp;文章</a>
            </li>
            <li class="layui-nav-item" th:classappend="${pageName=='timeline'}?'layui-this':''">
                <a th:href="@{/timeline}"><i class="fa fa-hourglass-half"></i>&nbsp;日记</a>
            </li>
            <li class="layui-nav-item" th:classappend="${pageName=='photo'}?'layui-this':''">
                <a th:href="@{/photo}"><i class="fa fa-photo"></i>&nbsp;相册</a>
            </li>
            <li class="layui-nav-item" th:classappend="${pageName=='leavemessage'}?'layui-this':''">
                <a th:href="@{/leavemessage}"><i class="fa fa-commenting"></i>&nbsp;留言</a>
            </li>
        </ul>
        <ul class="layui-nav" style="float: right;" id="user-info-nav">
            <!-- 未登录状态 -->
            <li class="layui-nav-item" th:classappend="${pageName=='login'}?'layui-this':''">
                <a th:href="@{/login}">登录</a>
            </li>
            <li class="layui-nav-item" th:classappend="${pageName=='register'}?'layui-this':''">
                <a th:href="@{/register}">注册</a>
            </li>
        </ul>
        <script type="text/html" id="user-info-tpl">
  <!--          <li class="layui-nav-item">
                <a href="#">
                    <i class="layui-icon layui-icon-notice"></i>
                    通知
                    <span class="layui-badge">0</span>
                </a>
            </li>-->
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="{{d.avatar}}" class="layui-nav-img">
                    <span class="layui-hide-xs"
                          style="font-family:serif;font-size: 16px !important;">{{d.userName}}</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/user/center/{{d.userId}}">个人中心</a></dd>
                    {{# if(d.roleId!=1 ){   }}
                    <dd><a href="/admin/index" target="_blank">后台管理</a></dd>
                    {{# }  }}
                    <dd><a href="javascript:;" onclick="logout()">退出</a></dd>
                </dl>
            </li>
        </script>
    </div>
    <!-- 移动端阴影遮罩层 -->
    <div class="shadow"></div>
</div>

<!-- 底部版权区 -->
<div class="blog-footer" th:fragment="blog-footer">
    <hr>
    <div class="layui-container">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md4">
                <p>联系我</p>
                <img th:src="@{/img/qq.jpg}"/>
            </div>
            <div class="layui-col-md4">
                <p>版权信息</p>
                © 2020 - Made by GZC
            </div>
            <div class="layui-col-md4" id="links">
                <p>友情链接</p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $.getJSON('/link/list', function (res) {
                if (res.code != 0) {
                    return $("#links").append(res.msg);
                }
                $.each(res.data, function (index, item) {
                    //拼接的Html后面需要添加 空格 或者 "\n"等，不然样式会出现问题
                    $("#links").append('<a href="' + item.url + '" target="_blank">' + item.linkName + '</a>\n');
                });
            });
        });
    </script>
</div>
</body>
</html>